/*!
Theme Name:   	Qin
Theme URI:    	http://leegorous.net/blog/qin/
Author:         Leegorous
Author URI:     https://leegorous.net/
Description:  	Qin is a child theme of Stronefront
Template:       storefront
Version:      	0.0.33
Text Domain:  	qin
Tags:         	e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options
*/
$color_links: 		#22b573;
$darker_links :   #1a8a58;

html {
  -webkit-font-smoothing: antialiased!important
}

body {
  font-size: 16px;
}

a:focus {
  outline: 0;
}

.clearfix {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

.hide {
  display: none;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.button.alt {
  background-color: #22b573;
  border-color: #22b573;
}

.btn-primary {
  background-color: $color_links;
  border-radius: 6px;
  color: #fff;
  padding: .25em 1.25em;
  font-weight: normal;
}

.site-branding {
  margin-bottom: 1em;

  .logo {
    clear: none;
  }
}

.site-header {
  border-bottom: 0;

  .custom-logo-link {
    display: inline-block;
  }
}

.site-top-navbar {
  display: none;
  padding: 0.45em 99em;
  margin: 0 -99em 1.618em;
  background-color: #f2f2f2;
  border-top: 3px solid $color_links;
  color: #888;
  font-size: 0.875em;

  a {
    color: #666;
    font-weight: 600;
  }

  .fa {
    color: $color_links;
    font-size: 1.3em;
    vertical-align: text-bottom;
    padding: 0 .25em;
  }

  &:after {
    content: " ";
    display: block;
    clear: both;
  }

  .navbar-links {
    margin: 0;

    & > li {
      list-style: none;
      display: inline-block;
    }

    a {
      color: #666;
      display: inline-block;
      padding: 0 1em;
      text-transform: uppercase;
    }
  }
}

.site-my-account {
  float: right;
  display: none;
}

.main-navigation {
  &.toggled .handheld-navigation {
    // border-bottom: 1px solid #22b573;
  }

  .handheld-navigation {
    margin-left: -1.41575em;
    margin-right: -1.41575em;
    // border-top: 1px solid #22b573;

    .menu-item {
      a {
        padding-left: 1.41575em;
        padding-right: 1.41575em;
      }
    }
  }
}

.main-navigation {
  ul.menu,
  ul.nav-menu {
    & > li {
      &:hover > a {
        color: #fff;
        background-color: $color_links;
      }

      & > a {
        color: #666;
        padding-top: .5em;
        font-weight: 600;
      }
    }
  }
}

.main-navigation ul.menu>li.current_page_item>a,
.main-navigation ul.nav-menu>li.current_page_item>a,
.main-navigation ul.menu>li.current_page_parent>a,
.main-navigation ul.nav-menu>li.current_page_parent>a,
.main-navigation ul.nav-menu>li>a:hover {
  background-color: $color_links;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: #fff;
}

.page-template-template-homepage.has-post-thumbnail .type-page.has-post-thumbnail {
  padding: 0;
}

.type-page.has-post-thumbnail {
  background: #4d4d4d;
}

.home {
  .site-header {
    padding-bottom: 0;
  }

  .master-slider-parent {
    margin-bottom: 2em;
  }
}

.swiper-container {
  height: 300px;

  .swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .swiper-content-wrap {
    height: 300px;
    position: relative;
  }

  .swiper-content-inner-wrap {
    height: 100%;
    position: relative;
  }

  .swiper-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    // background: #4d4d4d;
    padding: 1em;
  }

  .swiper-content-title {
    color: #fff;
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }

  .swiper-content-summary {
    color: #ccc;
    display: none;
  }

  .swiper-pagination-bullet {
    width: 80px;
    border-radius: 0;
    background-color: #ccc;
  }

  .swiper-pagination-bullet-active {
    background-color: #22b573;
  }
}

.woocommerce-multi-currency.sidebar {
  display: none;
}

.widget {
  .widget-title,
  .widgettitle {
    padding: .5em 0;
    font-weight: 600;
  }
}

.site-search .widget_product_search form input[type=search] {
  border-radius: 4em;
}

.storefront-breadcrumb {
  border-top: 3px solid #e2e2e2;
  padding-top: 1em;
  padding-bottom: 1em;
  background: #f2f2f2;
}

.storefront-sticky-add-to-cart__content {
  .storefront-sticky-add-to-cart__content-button {
    border-radius: 4px;
  }
}

@media screen and (max-width: 374px) {
  .site-header {
    .custom-logo-link {
      img {
        max-width: 160px;
      }
    }
  }
}


@media screen and (min-width: 768px) {
  .site-header {
    padding-top: 0;

    .custom-logo-link {
      float: none;
    }

    .site-branding {
      img {
        width: 250px;
      }
    }
  }

  .site-top-navbar {
    display: block;
  }

  .home {
    .site-header {
      /*
      .storefront-primary-navigation {
        &:after {
          height: 0;
        }
      }
      */
    }
  }

  .main-navigation {
    ul.menu>li:first-child,
    ul.nav-menu>li:first-child {
      margin-left: 0;
    }
  }

  .site-my-account {
    display: block;
  }

  .woocommerce-active {
    .site-branding {
      width: auto;
    }

    .site-header {

      .main-navigation {
        width: auto;
      }

      .site-header-cart {
        // width: 3em;
        margin: .4em 0 0 0;

        .cart-contents {
          padding: .618em;
          text-align: center;
          /*
          &:after {
            float: none;

          }*/
        }
      }

      .site-search {
        margin-top: .41575em;
        margin-bottom: .41575em;
      }
    }
  }

  .site-header-cart {
    .widget_shopping_cart {
      border-top: 4px solid $color_links;
    }
  }
  /*
  .site-header-cart {
    &.focus,
    &:hover {
      .widget_shopping_cart {
        right: 0;
        left: -200px;
        width: auto;
      }
    }
  }
  */

  .storefront-primary-navigation {
    margin-top: 1.196em;
  }

  .main-navigation {
    .product-category-menu {
      background-image: url(assets/img/bg-homepage-menu.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: bottom;
    }

    .product-sub-menu {
      .product-sub-menu {
        left: 0;
        float: none;
        position: relative;
      }
    }
    ul li:hover {
       & > ul > li {
         & > ul {
           position: relative;
           left: 0;
           a {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             padding-top: .25em;
             padding-bottom: .25em;
             &:hover {
               background-color: #f2f2f2;
             }
           }
         }
       }

       & > ul > li:hover {
         & > a {
           background-color: #fff;
         }

         & > ul {
           left: 0;
         }
       }
    }

    ul.menu > li > ul.product-category-menu {
      background-color: #fff;
      box-shadow: 0 5px 10px rgba(0,0,0,.15);
      border-top: 3px solid $color_links;
      right: auto;
      width: 600px;
      padding-bottom: .5em;
      /*
      li.menu-item-has-children {
        position: static;

        & ul.sub-menu {
          top: 0;
        }
      }

      li > a {
        padding-left: 1em;
        padding-right: 1em;
      }*/
      & > li {
        width: 200px;
        float: left;

        & > a {
          border-bottom: 1px solid #e2e2e2;
          color: #666;
          font-weight: 700;
          padding-top: .618em;
          padding-bottom: .618em;
          margin-bottom: .5em;

          &:after {
            content: '';
          }
        }
      }

      & > li.menu-item-has-children {
        & > ul.sub-menu > li > a {
          width: 300px;

          &:hover {
            color: #009245;
          }
        }
      }

    }

    .mega-menu {
      width: 200%;

      & > li {
        float: left;
      }
    }

    .mega-menu-3x {
      width: 300%;
    }
  }

  .swiper-container {
    height: 400px;

    .swiper-slide {
      background-position: center;
    }

    .swiper-button-prev,
    .swiper-button-next {
      padding: 2em;
      width: 2em;
      height: 2em;
      background-color: rgba(0,0,0,.5);
      background-size: 1.5em 1.5em;
    }

    .swiper-content-wrap {
      height: 400px;
    }

    .swiper-content-inner-wrap {
      width: 100%;
      margin-left: 60%;
      background: rgba(50,50,50,.9);
    }

    .swiper-content {
      left: 0;
      top: 0;
      width: 40%;
      box-sizing: border-box;
      padding: 1em;
    }

    .swiper-content-title {
      font-size: 1.25em;
      margin-bottom: 7em;
    }

    .swiper-content-summary {
      display: block;
    }
  }

  .swiper-container-horizontal > .swiper-pagination-bullets {
    width: 40%;
    left: auto;
    right: 0;
  }

  .right-sidebar .content-area {
    width: 100%;
    float: none;
  }

  .right-sidebar .widget-area {
    width: 100%;
    float: none;
  }

  .woocommerce-multi-currency.sidebar {
    display: block;
  }

  .footer-widgets {
    border-bottom: 1px solid rgba(0,0,0,.1);
  }

}

@media screen and (min-width: 960px) {
  .site-header {
    .site-branding {
      img {
        width: 300px;
      }
    }
  }

  .right-sidebar .content-area {
    width: 73.9130434783%;
    float: left;
    position: relative;

    &:after {
      content: " ";
      display: block;
      position: absolute;
      top: 0;
      left: 104%;
      right: -35.4117647%;
      bottom: 0;
      z-index: -1;
      background-color: #f2f2f2;
    }
  }

  .right-sidebar .widget-area {
    width: 21.7391304348%;
    float: right;
    padding-right: 1em;
  }

  .page-template-template-fullwidth-php,
  .page-template-template-homepage-php {
    .content-area {
      width: 100%;
      float: none;
      &:after {
        display: none;
      }
    }
  }
}

@media screen and (min-width: 1200px) {
  .swiper-container {
    height: 400px;

    .swiper-content {
      left: 0;
      top: 0;
      width: 40%;
      box-sizing: border-box;
      padding: 3em 2em 2em;
    }

    .swiper-content-title {
      font-size: 1.25em;
      margin-bottom: 7em;
    }

    .swiper-content-summary {
      display: block;
    }
  }


  .swiper-container-horizontal > .swiper-pagination-bullets {
    width: 40%;
    left: auto;
    right: 0;
  }
}

ul.products li.product.product-category .woocommerce-loop-category__title,
ul.products li.product.product-category h2,
ul.products li.product.product-category h3 {
  color: #36B0E4;
  font-weight: bold;
}


@import './assets/sass/_post.scss';
@import './assets/sass/_footer.scss';
@import './assets/sass/woocommerce/_form.scss';
@import './assets/sass/woocommerce/_homepage.scss';
@import './assets/sass/woocommerce/_product.scss';
